<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs *ngIf="pageType === 'new'" [items]="['收费管理', '开票管理', '申请开票']" icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    <sa-big-breadcrumbs *ngIf="pageType === 'update'" [items]="['收费管理', '开票管理', '编辑开票信息']" icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <div class="s_page_wrap">
    <div class="row" style="margin-top: 5px">
      <div class="col-xs-12">
        <form id="applyInvoiceForm" name="applyInvoiceForm" class="form-horizontal" role="form" novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions">
          <div class="module-area">
            <div class="title">基本信息</div>
            <div *ngIf="pageType === 'update'" class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                申请人姓名
                <!-- <sup>*</sup> -->
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="name" type="text" [(ngModel)]="page.name" placeholder="请输入申请人姓名"
                    [disabled]="pageType === 'update'?true:false" />
                </div>
              </div>
            </div>
            <div *ngIf="pageType === 'update'" class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                申请人手机号
                <!-- <sup>*</sup> -->
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="phone" type="text" [(ngModel)]="page.phone" placeholder="请输入申请人手机号"
                    [disabled]="pageType === 'update'?true:false" />
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                所属项目
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <input type="hidden" class="form-control" name="factoryName" id="factoryName"
                  [(ngModel)]="page.factoryName" />
                <sa-company-tree wrap="html" wrapId="applyInvoiceForm" companyTreeId="companyTree4" [Height]="32"
                  inputName="dockingFactory" [companyNameValue]="page.factoryName"
                  [companyParentList]="companyParentList" [companyIdValue]="page.factoryId"
                  (companySelected)="addCompanySelected2($event)"
                  [disabled]="page.system == 0?true:false"></sa-company-tree>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                发票类型
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <select class="form-control" name="invoiceType" [(ngModel)]="page.invoiceType"
                    (change)="invoiceTypeChange($event.target.value)" style="width: 100%"
                    [disabled]="page.system == 0?true:false">
                    <option *ngFor="let item of invoiceTypeList" [value]="item.value">{{ item.text }}</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                开票金额[元]
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="money" [(ngModel)]="page.money" placeholder="请输入开票金额[元]"
                    maxlength="10" [disabled]="page.system == 0?true:false" />
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                费用类型
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <select class="form-control" name="typeExpense" [(ngModel)]="page.typeExpense"
                    (change)="typeChange($event.target.value)" style="width: 100%"
                    [disabled]="page.system == 0?true:false">
                    <option value="" selected>请选择</option>
                    <option *ngFor="let item of typeExpenseList" [value]="item.value">{{ item.text }}</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                备注
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <textarea class="form-control" name="remark" cols="30" rows="5" [(ngModel)]="page.remark"
                    [disabled]="page.system == 0?true:false"></textarea>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">付款凭证</label>
              <div class="col-sm-10">
                <div class="imgFileList">
                  <div class="imgFileList-other">
                    <div class="imgFileList-multifile">
                      <div class="uploadlocation uploadlocation1">
                        <div class="content-list viewer1">
                          <div class="headImg" *ngFor="let item of imageInfo.imageList; let i = index">
                            <div class="contentImg"><img class="img" alt="付款凭证" [src]="item"
                                (click)="bigimg('viewer1')"></div>
                            <i class="deleteImg" (click)="deleteImg('1',i)"></i>
                          </div>
                          <button type="button" class="btn div_imgall" *ngIf="imageInfo.imageList.length < 5">
                            <div class="div_shuline"></div>
                            <div class="div_hengline"></div>
                            <input type="file" class="up" title=" " placeholder=" "
                              (change)="multifileChange($event.target.files)" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- 抬头信息 -->
          <div class="module-area">
            <div class="title">抬头信息</div>
            <div class="form-group s_fix_select2">
              <label class="control-label col-sm-1 no-padding-right">
                企业名称
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input type="hidden" class="form-control" id="headName" name="headName" [(ngModel)]="page.headName" />
                  <select class="select2 form-control" style="width: 100%" id="companySelect">
                    <option value=""></option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                企业税号
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="dutyParagraph" type="text" [(ngModel)]="page.dutyParagraph"
                    placeholder="请输入企业税号" />
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                注册地址
                <sup *ngIf="page.invoiceType == 0 || page.invoiceType == 2">*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="companyAddress" type="text" [(ngModel)]="page.companyAddress"
                    placeholder="请输入注册地址" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                注册号码
                <sup *ngIf="page.invoiceType == 0 || page.invoiceType == 2">*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="companyPhone" type="text" [(ngModel)]="page.companyPhone"
                    placeholder="请输入注册号码" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                开户银行
                <sup *ngIf="page.invoiceType == 0 || page.invoiceType == 2">*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="bankName" type="text" [(ngModel)]="page.bankName"
                    placeholder="请输入开户银行" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-1 no-padding-right">
                银行卡号
                <sup *ngIf="page.invoiceType == 0 || page.invoiceType == 2">*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="bankAccount" type="text" [(ngModel)]="page.bankAccount"
                    placeholder="请输入银行卡号" />
                </div>
              </div>
            </div>
          </div>

          <div class="module-area">
            <div class="title">收货信息</div>

            <div [class]="[page.invoiceType == 0 ? 'hidden form-group' : 'form-group']">
              <label class="control-label col-sm-1 no-padding-right">
                电子邮箱
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <div class="clearfix">
                  <input class="form-control" name="userEmail" type="text" [(ngModel)]="page.userEmail"
                    placeholder="请输入电子邮箱" />
                </div>
              </div>
            </div>

            <div [class]="[page.invoiceType == 1 || page.invoiceType == 2 ? 'hidden' : '']">
              <div class="form-group s_fix_select2">
                <label class="control-label col-sm-1 no-padding-right">
                  收货人姓名
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <input type="hidden" class="form-control" id="shippingName" name="shippingName"
                      [(ngModel)]="page.shippingName" />
                    <select class="select2 form-control" style="width: 100%" id="shippingSelect">
                      <option value=""></option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">
                  收货人手机号
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <input class="form-control" name="shippingPhone" type="text" [(ngModel)]="page.shippingPhone"
                      placeholder="请输入收货人手机号" />
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">
                  所在省份
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <select class="form-control" [(ngModel)]="page.provinceId"
                      (change)="provinceChange($event.target.value)" name="provinceId" placeholder="请选择"
                      autocomplete="address-level1">
                      <option value="">请选择</option>
                      <option *ngFor="let item of provinceNameArr" [value]="item.id">{{ item.areaName }}</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">
                  所在城市
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <select class="form-control" [(ngModel)]="page.cityId" (change)="cityChange($event.target.value)"
                      name="cityId" placeholder="请选择" autocomplete="address-level2">
                      <option value="">请选择</option>
                      <option *ngFor="let item of cityNameArr" [value]="item.id">{{ item.areaName }}</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">
                  所在地区
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <select class="form-control" [(ngModel)]="page.townId" (change)="townChange($event.target.value)"
                      name="townId" placeholder="请选择" autocomplete="address-level3">
                      <option value="">请选择</option>
                      <option *ngFor="let item of townNameArr" [value]="item.id">{{ item.areaName }}</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">
                  详细地址
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <input class="form-control" name="address" type="text" [(ngModel)]="page.address"
                      placeholder="请输入详细地址" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="center">
            <button class="btn btn-primary" (click)="onSubmit()">提交</button>
            <button type="button" (click)="goBack()" class="btn default">返回</button>
          </div>
        </form>
        <div class="hr hr-dotted"></div>
      </div>
    </div>
  </div>
</div>